import React, { Component } from "react";
import { NavBar, Icon } from "antd-mobile";
import { List, AutoSizer } from "react-virtualized";
import { getCurrentCity } from "../../../utils/location";

import "./index.less";

const parseCityList = async (list) => {
  const sheet = {};
  let indexes = [];

  for (const item of list) {
    //   拿到 开头字母
    const letter = item.short[0];
    // 拿到对应花名册中的数组
    const current = sheet[letter];

    current ? current.push(item) : (sheet[letter] = [item]);
    // sheet[letter] = [...(current || []), item];
  }
  indexes = Object.keys(sheet).sort();
  // 2.获取热门城市
  const res = await (await fetch("http://127.0.0.1:8080/area/hot")).json();

  res.status === 200 && (sheet.hot = res.body);
  // 想头部追加
  indexes.unshift("hot");

  sheet["#"] = [await getCurrentCity()];

  indexes.unshift("#");
  return { sheet, indexes };
};

const indexMapper = {
  "#": "当前城市",
  hot: "热门城市",
};
export default class CityList extends Component {
  state = {
    sheet: {},
    indexes: [],
  };

  async getCityList() {
    const res = await (
      await fetch("http://127.0.0.1:8080/area/city?level=1")
    ).json();

    if (res.status === 200) {
      const { sheet, indexes } = await parseCityList(res.body);
      // const fixedIndexes = indexes.map(i=>i.toUpperCase());
      // fixedIndexes[0] = "当前城市";
      // fixedIndexes[1] = "热门城市";

      this.setState({ sheet, indexes }, () => console.log(this.state));
      //   this.setState({ cityList: res.body }, () => console.log(this.state));
    }
  }

  componentDidMount() {
    // 获取城市猎表;
    this.getCityList();
  }

  rowRenderer({
    key, // Unique key within array of rows
    index, // Index of row within collection
    style, // Style object to be applied to row (to position it)
  }) {
    const indexName = this.state.indexes[index];
    return (
      <div key={key} style={style} className="city">
        <div className="title">
          {indexMapper[indexName] || indexName.toUpperCase()}
        </div>
        {/* //渲染里面的所有数据 */}
        {this.state.sheet[indexName].map((i) => (
          <div className="name" key={i.value}>
            {i.label}
          </div>
        ))}
      </div>
    );
  }
  // 城市 高度
  computeRowHeight({ index }) {
    //拿 abc索引
    const indexName = this.state.indexes[index];
    //拿城市数组
    const cityCount = this.state.sheet[indexName].length;

    return 36 + 50 * cityCount;
  }

  render() {
    return (
      <div className="citylist">
        <NavBar
          className="navbar"
          mode="light"
          icon={<Icon type="left" size="lg" color="#333" />}
          onLeftClick={() => this.props.history.goBack()}
        >
          城市列表
        </NavBar>
        {/* //城市长列表 */}
        <AutoSizer>
          {({ height, width }) => (
            <List
              width={width}
              height={height - 45}
              rowCount={this.state.indexes.length}
              rowHeight={this.computeRowHeight.bind(this)}
              rowRenderer={this.rowRenderer.bind(this)}
            />
          )}
        </AutoSizer>
      </div>
    );
  }
}
